<template>
  <div class="receive-info" v-loading="loading">
    <div class="font-bold mb-2">
      <span>
        单位总数：
        <span class="underline">{{ result.allNumber }}</span>
        件
      </span>
      <span class="px-5 text-blue-400">
        已签收：
        <span class="underline">{{ result.sign }}</span>
        件
      </span>
      <span class="text-red-400">
        未签收：
        <span class="underline">{{ result.notSigned }}</span>
        件
      </span>
    </div>
    <Table :data="tableData" :select-column="false">
      <TableColumn label="责任部门" prop="unitName" />
      <TableColumn label="责任领导" prop="responsibleLeaderName" />
      <TableColumn label="联系电话" prop="responsibleLeaderPhone" />
      <TableColumn label="责任科室" prop="responsibleDeptName" />
      <TableColumn label="责任人" prop="responsibleUserName" />
      <TableColumn label="联系电话" prop="responsibleUserPhone" />
    </Table>
  </div>
</template>

<script setup lang="ts">
import { computed, onMounted, ref } from 'vue'
import { getUnitReceive } from '@/api/mission/receive'
import Table from '@/components/table/Table.vue'
import TableColumn from '@/components/table/TableColumn.vue'

const { matterId } = defineProps<{
  matterId?: number
}>()

const tableData = computed(() => {
  return result.value.list
})

const loading = ref(false)
const result = ref({
  allNumber: 1,
  list: [],
  notSigned: 0,
  sign: 1,
})

async function getInfo() {
  const { data } = await getUnitReceive(matterId)
  if (data.status === 200) {
    result.value = data.data
  }
}

onMounted(async () => {
  if (matterId) {
    loading.value = true
    await getInfo()
    loading.value = false
  }
})
</script>

<style scoped lang="scss"></style>
